//数据
let lists = ['学习 JavaScript','学习css','学习html5'];

function d(){
    //先让ul的内容为空
    document.querySelector("#ul").innerHTML = ''

    //然后再填充内容
    for(let i = 0; i< lists.length; i++){
        let li = document.createElement('li')
        li.className = "list-group-item d-flex justify-content-between align-items-c"
        let span = document.createElement('span')
        let spanText = document.createTextNode(lists[i])
        span.appendChild(spanText)

        //先把span设置为不可编辑状态
        span.setAttribute('contenteditable',false)
        //给span加双击事件
        span.addEventListener('dblclick',function(){
            //span设置为可编辑状态
            span.setAttribute('contenteditable',true)
        })
        //span加失去焦点事件
        span.addEventListener('blur',function(){
            //span设置为不可编辑状态
            span.setAttribute('contenteditable',false)
        })
        li.appendChild(span)

        let button = document.createElement('button')
        button.type='button'
        button.classList.add('close')
        button.innerHTML = '&times;'
        //给button加事件
        button.addEventListener('click',function(){
            lists.splice(i,1)
            //点击后，再重新渲染一遍DOM
            d()
        })
        li.appendChild(button)


        let ul = document.querySelector('#ul')
        ul.appendChild(li)
    }
}
//默认先循环一遍数组内容
d()
let btn = document.querySelector("#btn")
btn.addEventListener('click',function(){
    let text = document.querySelector("#ipt")
    if(text.value != ''){
        lists.unshift(text.value)
        //追加完毕内容之后，把input的内容清空
        text.value = ''
    }else{
        alert("不可以为空。")
    }
    //执行for循环
    d()
})